<template>
  <div class="comman_and">
    <el-dialog
      @close="handleClose"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="命令详情"
      :close-on-click-modal="false"
      :visible="showDialog"
    >
      <div style="position: relative; margin-bottom: 20px">
        <!-- <div class="dividing-line"></div> -->
        <!-- <div class="text">详情</div> -->
        <MyTitle title="详情"></MyTitle>
        <div class="textFlex">
          <el-tooltip
            class="item"
            effect="dark"
            :content="detailData.token"
            placement="top-start"
          >
            <div class="commandToken">Token ：{{ detailData.token }}</div>
          </el-tooltip>
          <div class="commandToken">名称 ：{{ detailData.name }}</div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="detailData.namespace"
            placement="top-start"
          >
            <div class="commandToken">
              命名空间 ：{{ detailData.namespace }}
            </div>
          </el-tooltip>
          <div class="explain1">说明 ：{{ detailData.description }}</div>
          <!-- <div class="explain1">说明 ：{{ detailData.description }}</div> -->
        </div>
      </div>

      <div style="position: relative; margin-bottom: 20px">
        <MyTitle title="参数"></MyTitle>
        <!-- <div class="dividing-line"></div>
        <div class="text">参数</div> -->
        <el-form
          :model="detailData"
          ref="formRef"
          size="mini"
          label-width="auto"
          class="tabHight_auto"
        >
          <el-form-item
            v-for="(item, index) in detailData.parameters"
            :key="index"
            :prop="'parameters.' + index + '.value'"
            :rules="{
              required: item.required,
              message: item.name + '不能为空',
              trigger: 'blur',
            }"
            :label="item.name + ' (' + item.type + ')'"
          >
            <el-input size="small" v-model="item.value"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm('formRef')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MyTitle from "@/components/MyTitle";
import { postInvocations } from "@/api/device";
export default {
  components: {
    MyTitle,
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    deviceToken: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      detailData: {},
    };
  },
  computed: {
    username() {
      return this.$store.state.user.user.username;
    },
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parameters = this.detailData.parameters.map((item) => {
            return {
              name: item.name,
              value: item.value,
            };
          });
          let parameterValues = {};
          parameters.forEach((item) => {
            parameterValues[item.name] = item.value;
          });
          const from = {
            commandToken: this.detailData.token,
            initiator: "REST",
            initiatorId: this.username,
            parameterValues,
            target: "Assignment",
            targetId: "",
          };
          postInvocations(from, this.deviceToken).then((res) => {
            this.$msg({
              message: "提交成功",
              type: "success",
            });
            this.detailData = {};
            this.$emit("handEvent", true);
          });

          // alert("submit!");
          //           {
          //     "commandToken":"727a523f-d9a8-4082-8c1f-2cb40703a146",
          //     "parameterValues":{
          //         "time":"1"
          //     },
          //     "metadata":{
          //     },
          //     "initiator":"REST",
          //     "initiatorId":"admin",
          //     "target":"Assignment",
          //     "targetId":"e1fdff41-9c65-471c-ae22-1e3b23206eed"
          // }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 弹窗关闭改变参数
    handleClose() {
      this.$emit("handEvent");
      this.$nextTick(() => {
        this.$refs["formRef"].resetFields();
        this.$refs["formRef"].clearValidate();
      });
    },
    // 弹窗取消键
    cancel() {
      this.$emit("handEvent");
    },
  },
};
</script>

<style scoped lang='scss'>
.comman_and /deep/ .title_box {
  padding-left: 0;
}
.textFlex {
  margin-left: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dividing-line {
  display: inline-block;
  height: 24px;
  width: 4px;
  margin: 0 10px;
  vertical-align: middle;
  background-color: #2680d2;
}
.text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  position: absolute;
  top: 2px;
  left: 20px;
}
.commandToken {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commandName {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nominate {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explain1 {
  margin-top: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>